<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import request from '@/api/index';
  import { debris_balance } from '@/pinia/getter';
  import specs from './specs.vue';
  import recordList from './recordList.vue';
  import { xmtoast } from '@/utils/public';
  import boxback from './boxback.vue';
  const specsRef = ref(),
  recordListRef = ref();
  interface listQuery {
    goods_type:number
    title:string
    list:Array<goodsInfo>
  }
  interface goodsInfo {
    good_id:number
    goods_name:string
    small_img:string
    price:number
    goods_type:number
  }
  const action = reactive({
    goodsList:[] as Array<listQuery>
  })
  const handleExchange = (goodsInfo:any = {})=>{
    const { good_id=0, price=0 } = goodsInfo
    if(!good_id) return xmtoast('商品异常')
    specsRef.value.openDialog({
      good_id,
      price
    })
  }
  const getList = async()=>{
    const titleArr = [
      {type:1,title:'头像框'},
      {type:2,title:'进场特效'},
      {type:3,title:'气泡'},
    ]
    const goodsList = [] as Array<listQuery>
    const res = await request.gameInfo()
    const { data=[] } = res
    data.forEach((res:any) => {
      const { goods_type = 0 } = res
      const key = goodsList.findIndex(res=> res.goods_type == goods_type)
      if(key > -1) {
        goodsList[key].list.push(res)
      }else {
        goodsList.push({
          goods_type,
          title:titleArr.find(res=>res.type == goods_type)?.title || '',
          list:[res]
        })
      }
    });
    action.goodsList = goodsList
  }
  getList()
</script>

<template>
  <div class="contBox">
    <img src="@/assets/images/titleimg2.png" class="titleImg">
    <boxback :iconNum="4" class="goodsList">
      <div class="mb-24 flex-align-between">
        <div class="balance flex-align">
          <img src="@/assets/images/icon2.png" class="iconImg">
          <span>碎片：{{ debris_balance }}</span>
        </div>
        <div @click="recordListRef.openDialog()" class="textBut">兑换记录</div>
      </div>
      <template v-for="item in action.goodsList">
        <div class="textTitle">
          <span>{{ item.title }}</span>
        </div>
        <div class="listCont">
          <template v-for="goods in item.list">
            <div class="goodsInfo">
              <div class="image">
                <img :src="goods.small_img">
                <div class="day">1天</div>
              </div>
              <div class="name">{{ goods.goods_name }}</div>
              <div class="goodsPrice flex-align">
                <img src="@/assets/images/icon2.png" class="iconImg">
                <span>{{ goods.price }}</span>
              </div>
              <div @click="handleExchange(goods)" class="but">兑换</div>
            </div>
          </template>
        </div>
      </template>
    </boxback>
  </div>
  <recordList ref="recordListRef" />
  <specs ref="specsRef" />
</template>

<style lang='scss' scoped>
  .goodsList {
    padding: 40px 14px 30px;
    
    .balance {
      .iconImg {
        width: 16px;
        height: 16px;
        margin-right: 2px;
      }
      span {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;
      }
    }
    .textBut {
      width: 72px;
      height: 20px;
      line-height: 20px;
      color: #FFEED5;
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      background: rgba(255,238,213,0.2);
      border-radius: 17px;
      border: 1px solid #FFEED5;
    }
    .textTitle {
      width: 327px;
      height: 28px;
      margin-top: 30px;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        color: #FFEED5;
        font-size: 14px;
        font-weight: 600;
        margin: 0 8px;
      }
      
    }
    .textTitle:before {
      display: block;
      content: '';
      width: 28px;
      height: 2px;
      background: url('@/assets/images/icon3.png') left top / 100% 100% no-repeat;
    }
    .textTitle:after {
      display: block;
      content: '';
      width: 28px;
      height: 2px;
      background: url('@/assets/images/icon3.png') left top / 100% 100% no-repeat;
      transform: scale(-1);
    }
    .listCont {
      width: max-content;
      margin: 20px auto 0;
      display: grid;
      grid-template-columns: repeat(2 , 140px);
      grid-gap: 20px 19px;
    }
    .goodsInfo {
      width: 140px;
      .image {
        position: relative;
        width: 140px;
        height: 140px;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid #5E6ABC;
        background: linear-gradient(360deg, #0C0442 0%, #000A18 100%);
        .day {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 29px;
          height: 19px;
          line-height: 19px;
          color: #000;
          font-size: 12px;
          text-align: center;
          font-weight: 600;
          background: #FFEED5;
          border-radius: 10px 0px 10px 0px;
        }
        img {
          width: auto;
          height: 100%;
        }
      }
      .name {
        width: max-content;
        color: #FFEED5;
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;
        margin: 10px auto 4px;
      }
      .but {
        width: 82px;
        height: 32px;
        line-height: 32px;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        margin: 8px auto 0;
        background: #fe9973;
        border-radius: 17px;
      }
    }
  }
</style>